<template>
  <div class="cparkOngoingOrders-page">
    <div class="table-container">
        <OrderDetails :orderDetails="list.data" />
      </div>
      <div class="table-container">
        <PictureDetails :orderDetails="list.data" />
      </div>
      <div class="table-container" v-if="list.data.payRecords.length > 0">
        <PaymentDetails :orderDetails="list.data" />
      </div>
  </div>
</template>

<script setup>
import { ref, reactive } from "vue";
import OrderDetails from "./orderDetails.vue";
import PictureDetails from "./pictureDetails.vue";
import PaymentDetails from "./paymentDetails.vue"; 
import { getProcessOrdersDetails } from "../request.js";
import { useRoute } from "vue-router";
const route = useRoute();
// document.body.style.backgroundColor = 'var(--main-bg-color)';
const list = reactive({
  data: {},
});
const getData = async () => {
  console.log("route ===>", route);

  await getProcessOrdersDetails(route.query.id).then((res) => {
    console.log("res ===>", res);
    list.data = res.data.result;

    document.title = list.data.lotName + " - " + list.data.licensePlate;
  });
};

getData();
</script>
<style lang="less">
body {
  background-color: var(--main-bg-color);
}
</style>
<style lang="less" scoped>
.cparkOngoingOrders-page {
  // padding: 24px 170px;
  background: var(--main-bg-color);
  // min-width:1100px;
}
.table-container {
  margin: 24px 170px;
  min-height: 100%;
  min-width: 1100px;
  padding: 24px;
  background: #fff;
  border-radius: 6px;
}
</style>
